<template>
  <div class="home-top">
    <h3>人气推荐</h3>
    <div class="content">
      <van-card
        v-for="item in goodsList"
        :key="item.id"
        :tag="item.tag"
        :price="item.retail_price"
        :origin-price="item.origin_price"
        :desc="item.goods_brief"
        :title="item.name"
        :thumb="item.list_pic_url"
      >
      </van-card>
    </div>
  </div>
</template>

<script setup>
const goodsList = [
  {
    retail_price: "256.00",
    name: "黑神话悟空",
    goods_brief: "角色扮演、自由冒险、故事情节。",
    list_pic_url: "/images/h1.jpg",
    tag: "TOP1",
  },
  {
    retail_price: "98.00",
    origin_price: "256.00",
    name: "荒野大镖客2",
    goods_brief: "角色扮演、开放世界、故事情节。",
    list_pic_url: "/images/dbg.jpg",
    tag: "TOP2",
  },
  {
    retail_price: "128.00",
    origin_price: "339.00",
    name: "艾尔登法环",
    goods_brief: "角色扮演、开放世界、故事情节、自由冒险。",
    list_pic_url: "/images/h2.jpg",
    tag: "TOP3",
  },
  {
    retail_price: "124.00",
    origin_price: "268.00",
    name: "极限竞速 地平线5",
    goods_brief: "开放世界、模拟赛车。",
    list_pic_url: "/images/dpx.jpg",
    tag: "TOP4",
  },
  {
    retail_price: "99.00",
    origin_price: "256.00",
    name: "骑马与砍杀2",
    goods_brief: "角色扮演、模拟经营、自由对战。",
    list_pic_url: "/images/qk.jpg",
    tag: "TOP5",
  },
  {
    retail_price: "338.00",
    origin_price: "486.00",
    name: "博德之门3",
    goods_brief: "角色扮演、开放世界。",
    list_pic_url: "/images/bd.jpg",
    tag: "TOP6",
  },
  {
    retail_price: "35.00",
    origin_price: "56.00",
    name: "完蛋！我被美女包围了!",
    goods_brief: "角色扮演、故事情节、剧情演绎",
    list_pic_url: "/images/mv.jpg",
    tag: "TOP7",
  },
  {
    retail_price: "108.00",
    origin_price: "256.00",
    name: "幻兽帕鲁",
    goods_brief: "角色养成、自由对战、开放世界。",
    list_pic_url: "/images/hs.jpg",
    tag: "TOP8",
  },
];
</script>

<style lang="less" scoped>
.home-top {
  h3 {
    font-size: 22px;
    line-height: 50px;
    text-align: center;
    margin: 0.5rem 0;
  }
  .content {
    --van-tag-primary-color: #ff8000;
    --van-card-font-size: 15px;
    --van-card-background: #f9f9f9;
    background: var(--van-card-background);
    :deep(.van-card) {
      margin-top: 0;
      .van-card title {
        padding: 10px 0 5px;
      }
      .van-card price-currency {
        font-size: var(--van-card-font-size);
      }
    }
    &::after {
      content: "";
      display: block;
      height: 3rem;
    }
  }
}
</style>
